<template>
    <div class="order">
        <!-- 这是订单页面  -->
        <div class="order-title">
            <h2>结算支付</h2>
        </div>
        <div class="order-container">
            <div class="order-container-content">
                <a-row type="flex" justify="center" >
                    <!-- 左边的地址和支付方式 -->
      	        	<a-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15" class='order-content-left'>
                        <div class="center-left-address">
                            <h2>配送地址信息</h2>
                            <div @click="showModal">
                                <a-icon type="plus" />
                                <span>添加配送地址</span>
                            </div>
                        </div>
                        <div class="center-left-addressList">
                            <a-dropdown :trigger="['click']" placement="bottomCenter" overlayClassName="center-left-addressList-content"> 
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    <p v-if="onAddress.length == 0">您还没有添加地址</p>
                                    <p v-if="onAddress.length >= 1">{{onAddress[0].name}}，{{onAddress[0].phone}}，{{onAddress[0].area_name}} {{onAddress[0].desc}}</p>
                                    <a-icon type="down" />
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item>
                                        <div v-for="item in cityAddressArr" :key="item.id" @click="upaddress(item)" :class="{show: checkedshow == item.id}">
                                            <p>{{item.name}}，{{item.phone}}，{{item.area_name}} {{item.desc}}</p>
                                            <span @click="changeAddress(item)">编辑</span>
                                        </div>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </div>
                        <div class="center-left-pay">
                            <h2>支付方式</h2>
                            <p class="center-left-pay-p1">*使用花呗支付，点击领取专享额度</p>
                            <div class="center-left-pay-way">
                                <a-row type="flex" justify="space-between">
                                    <a-col :xs="11" :sm="11" :md="11" :lg="5" :xl="5" class="item item1">
                                        <input type="radio" name="pay">
                                        <span class="iconfont icon-zhifubao1"></span>
                                        <span>支付宝</span>
                                    </a-col>
                                    <a-col :xs="11" :sm="11" :md="11" :lg="6" :xl="6" class="item item2">
                                        <input type="radio" name="pay">
                                        <span class="iconfont icon-huabei"></span>
                                        <span>花呗分期支付</span>
                                    </a-col>
                                    <a-col :xs="11" :sm="11" :md="11" :lg="5" :xl="5" class="item item3">
                                        <input type="radio" name="pay">
                                        <span class="iconfont icon-weixinzhifu"></span>
                                        <span>微信支付</span>
                                    </a-col>
                                    <a-col :xs="11" :sm="11" :md="11" :lg="5" :xl="5" class="item item4">
                                        <input type="radio" name="pay">
                                        <span class="iconfont icon-zhifupingtai-yinlian"></span>
                                        <span>银联支付</span>
                                    </a-col>
                                </a-row>
                            </div>
                            <p class="center-left-pay-p2">*若遇单笔限额，可分多笔充值到支付宝余额后再进行付款;若遇单日支付限额，可使用余额宝或更换其他银行卡充值到余额后付款。</p>
                            <div class="invoice">
                                <span>发票信息</span>
                                <p>浪琴使用电子发票。您可以参阅使用说明，在包裹内获得您的电子发票提取码，然后获取您的电子发票。</p>
                            </div>
                        </div>
                        <div class="center-left-btn">
                            <div class="agreement">
                                <a-checkbox></a-checkbox>
                                <span>我已阅读并同意</span>
                                <span>《销售条件》</span>
                                <span>《发货和退货协议》</span>
                            </div>
                            <div class="btn" @click="pay">
                                <div>
                                    <span>继续支付</span>
                                    <span class="iconfont icon--_jiantou"></span>
                                </div>
                            </div>
                        </div>
                    </a-col>
                    <!-- 右边的商品详情 -->
      	        	<a-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9" class="order-content-right">
                        <div class="order-content-right-details">
                            <h2>订单详情</h2>
                            <ul>
                                <li>
                                    <span>小计</span>
                                    <span>{{orderDetails.total_price | demoMoney}}</span>
                                </li>
                                <li>
                                    <span>运费</span>
                                    <span>免费</span>
                                </li>
                                <li>
                                    <span>总计</span>
                                    <span>{{orderDetails.total_price | demoMoney}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="order-content-right-goods">
                            <h3>商品详情</h3>
                            <ul class="goodsList" v-if="orderGoods.length >= 1">
                                <li v-for="item in orderGoods" :key="item.id">
                                    <img :src="item.s_goods_photos[0].path" alt="">
                                    <div class="goodsList-li-text">
                                        <div class="goodsList-li-text1">
                                            <span>{{item.desc.split('_')[0]}}</span>
                                            <span>{{item.goods_name}}</span>
                                        </div>
                                        <div class="goodsList-li-text2">
                                            <span>
                                                数量：{{item.num}}
                                            </span>
                                            <span>
                                                {{item.price | demoMoney}}
                                            </span>
                                        </div>
                                        <div class="goodsList-li-text3">
                                            总价：{{item.price * item.num | demoMoney}}
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!-- 添加地址的对话框 -->
        <a-form-model 
            ref="ruleForm"
            :rules="rules"
            :model="form"
        >
            <a-modal
                title="添加配送地址"
                ok-text="保存"
                cancel-text="取消"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
                dialogClass="Order"
            >
                <a-row type="flex" justify="space-between">
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="姓名" prop="username">
                            <a-input v-model="form.username" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="手机号" prop="userphone">
                            <a-input v-model="form.userphone"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="7" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="省" prop="city">
                            <a-cascader :options="options" placeholder="" v-model="form.city" @change="onchange"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="地址" prop="address">
                            <a-input v-model="form.address"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="邮政编码" prop="postalCode">
                            <a-input />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-checkbox>设为默认地址</a-checkbox>
                    </a-col>
                </a-row>
            </a-modal>
        </a-form-model>
    </div>
</template>

<script>
import {getcity, addcity, getorder, uporder} from '../assets/js/request.js'
import {mapMutations, mapState, mapGetters, mapActions} from 'vuex'
export default {
    filters:{
        demoMoney(value) {
            if(value) {
                value = +(String(value).split(".")[0])
                return '￥' + value.toLocaleString() + ".00"
            }
        }
    },
    data() {
        return {
            // 传过来的订单id
            order_id:0,
            // 验证
            rules: {
                username: [
                  { required: true, message: '姓名为必填项', trigger: 'blur' },
                ],
                userphone: [
                  { required: true, message: '电话为必填项', trigger: 'blur' },
                ],
                city: [
                  { required: true, message: '地址为必选项', trigger: 'blur' },
                ],
                address: [
                  { required: true, message: '地址为必填项', trigger: 'blur' },
                ],
            },
            // 表单里的数据
            form: {
                username:"",
                userphone:"",
                city:[],
                address:""
            },
            // 控制对话框的显隐
            visible: false,
            // 控制提交按钮加载效果
            confirmLoading: false,
            // 级联选择选项
            options:[],
            // 判断是修改地址还是新增
            alter: false, //false新增  true修改
            // 修改地址的id
            alterId:"",
            // 当前的订单详情
            orderDetails:{},
            // 当前订单的商品数
            orderGoods:[],
            // 当前的选中的地址
            onAddress: [],
            // 选中地址的id
            checkedshow: 0
        }
    },
    async created() {
        // 获取城市列表
        this.options = await getcity()
        // 获取到穿过来的订单id
        this.order_id = this.$route.params.id
        if(this.order_id === "0") {
            // 解决用户没有地址时，订单没生成的情况的渲染
            let objda = JSON.parse(sessionStorage.getItem("temporary"));
            this.orderDetails.total_price =  objda.reduce((total, item)=>{
                return total += item.totalPrice
            }, 0);
            this.orderGoods = objda.map(item=>{
                let str = {...item.s_good, num:item.num, goods_name:item.s_good.name};
                return str;
            });
        } else {
            // 根据订单id来筛选vuex里对应的数据
            this.orderDetails = (this.orderList.filter(item => item.id == this.order_id))[0]
            // 订单的商品列表
            this.orderGoods = this.orderDetails.goods_info
            this.onAddress  = this.cityAddressArr.filter(item => {
                if(item.id == this.orderDetails.addr_id) {
                    return item
                }
            })
            // 当前选中的地址id
            this.checkedshow = this.onAddress[0].id
        }
    },
    methods: {
        ...mapActions('address', ["addCityRequest", "getMyAdderss", "delCity", "upAddress", 'getMyAdderss2']),
        ...mapMutations("address", ['upcity', 'GetMyAeddrss']),
        ...mapActions('order', ['addOrder', "getOrder"]),
        // 对话框的显隐
        showModal() {
            this.visible = true;
        },
        // 提交
        handleOk() {
            this.confirmLoading = true;
            this.handleSubmit()
        },
        // 取消
        handleCancel() {
            console.log('Clicked cancel button');
            this.visible = false;
            this.alterId = false
        },
        // 级联选择触发的回调 
        onchange(value,selectedOptions) {
            this.form.cityList = selectedOptions
        },
        // 提交表单回调函数
        handleSubmit() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    console.log(this.form)
                //   判断说新增还是修改
                    if (this.alter) {
                        this.alter = false
                        this.form.id = this.alterId
                        console.log(this.alter, "修改", this.form)
                        await this.upAddress(this.form)
                        .then((res) => {
                            console.log(res)
                            this.visible = false;
                            this.confirmLoading = false;
                            // 修改成功后，再请求自己的地址列表
                            return this.getMyAdderss();
                        })
                        .then(() => {
                            // 修改完地址后，在赋值给现在显示的地址
                            this.onAddress  = this.cityAddressArr.filter(item => {
                                if(item.id == this.orderDetails.addr_id) {
                                    return item
                                }
                            })
                        })
                        .catch((err) => {
                            this.visible = false;
                            this.confirmLoading = false;
                        })
                    } else {
                        // 验证字段成功, 添加地址请求
                        console.log(this.alter, "添加")
                        await this.addCityRequest(this.form)
                        .then((res) => {
                            this.visible = false;
                            this.confirmLoading = false;
                            // 添加成功后，再请求自己的地址列表
                            return this.getMyAdderss2();
                        })
                        .then((res)=>{
                            // 请求地址成功后，在赋值个vuex里
                            this.GetMyAeddrss(res);
                            // 再获取到第一个作为默认地址渲染到页面
                            this.onAddress.push(this.cityAddressArr[0]);
                            // console.log(this.onAddress)
                            // 判断是否只有一个地址
                            if(this.cityAddressArr.length === 1) {
                                // 从缓存里拿到商品
                                let checkedArr = JSON.parse(sessionStorage.getItem("temporary"));
                                // 添加订单的goods_info参数
                                let goods_infoArr = []
                                checkedArr.forEach(item => {
                                    let obj = {}
                                    obj.id = item.goods_id
                                    obj.num = item.num
                                    goods_infoArr.push(obj)
                                })
                                // 添加订单要传的参数对象
                                let addOrderObj = {}
                                addOrderObj.goods_info = goods_infoArr
                                addOrderObj.addr_id = this.cityAddressArr[0].id
                                // console.log(addOrderObj)
                                return this.addOrder(addOrderObj)
                            }
                        })
                        // .then((res)=>{
                        //     console.log(res)
                        // })
                        .catch((err) => {
                            this.visible = false;
                            this.confirmLoading = false;
                        });
                    }
                } else {
                    this.confirmLoading = false;
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 更改收货地址
        changeAddress(data) {
            console.log(data)
            this.visible = true
            this.alter = true
            this.alterId = data.id
            this.form.username = data.name
            this.form.userphone = data.phone
            this.form.address = data.desc
            this.form.area_name = data.area_name
            this.form.city = [Number(data.area.split(",")[0]),Number(data.area.split(",")[1]),Number(data.area.split(",")[2])]
            console.log(this.form)
        },
        // 选中地址的函数
        upaddress(item) {
            this.onAddress.splice(0,1,item)
            this.checkedshow = item.id
            // 更新当前订单的地址
            let id = this.$route.params.id
            uporder({id:id, addr_id:item.id})
        },
        // 支付
        pay() {
            if(!!this.order_id) {
                this.$message.info('您的默认收货地址为空，请先添加收货地址！');
            }
        }
    },
    computed: {
        ...mapState('address', ["cityAddressArr"]),
        ...mapState('order', ["orderList"])
    },
}
</script>

<style lang="scss" >
    .order {
        // 结算标题
        .order-title {
            width: 95%;
            margin: 36px auto;
            h2 {
                font-size: 40px;
                font-weight: 400;
                color: #003150;
            }
        }
        // 配送地址和支付方式
        .order-container {
            width: 100%;
            background-color: #F0F1F3;
            .order-container-content {
                width: 95%;
                margin: 0 auto;
                // 左边的支付详情
                .order-content-left {
                    padding: 60px 50px 30px 0px;
                    .center-left-address {
                        margin: 0 0 15px;
                        display: flex;
                        justify-content: space-between;
                        h2 {
                            font-size: 24px;
                            font-weight: 600;
                            color: #003150;
                        }
                        div {
                            font-size: 14px;
                        }
                    }
                    // 配送地址列表
                    .center-left-addressList {
                        width: 100%;
                        border: 1px solid black;
                        margin: 0 0 30px;
                        .ant-dropdown-link {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 15px 10px;
                            // 显示的地址内容
                            p {
                                color: #003150;
                                margin: 0;
                            }
                            // 下拉箭头
                            .anticon-down {
                                font-size: 20px;
                                color: #003150;
                            }
                        }
                    }
                    // 支付方式
                    .center-left-pay {
                        text-align: left;
                        h2 {
                            font-size: 20px;
                            font-weight: 600;
                            color: #003150;
                        }
                        .center-left-pay-p1 {
                            font-size: 14px;
                            color: #ff0000;
                            margin: 10 0 0;
                        }
                        .center-left-pay-way {
                            .item {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                input {
                                    width: 20px;
                                    height: 20px;
                                }
                                .iconfont {
                                    font-size: 30px;
                                }
                                .icon-zhifubao1,
                                .icon-huabei {
                                    color:dodgerblue;
                                }
                                .icon-weixinzhifu {
                                    color: green;
                                }
                            }

                        }
                        .center-left-pay-p2 {
                            font-size: 12px;
                            padding: 5px 0 10px;
                        }
                        // 发票
                        .invoice {
                            span {
                                font-size: 18px;
                                font-weight: 400;
                                margin: 15px 0 4px;
                            }
                            p {
                                font-size: 14px;
                                color: #84888B;
                                margin: 5px 0 60px;
                            }
                        }
                    }
                    // 点击继续支付的按钮
                    .center-left-btn {
                        // 协议
                        .agreement {
                            font-size: 13px;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            &>span {
                                text-decoration: underline;
                                margin: 0 5px;
                            }
                            span:first-of-type {
                                text-decoration: none;
                            }
                        }
                        // 继续支付按钮
                        .btn {
                            display: flex;
                            justify-content: flex-end;
                            div {
                                align-items: flex-end;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                color: white;
                                background-color: #003150;
                                width: 50%;
                                height: 72px;
                                padding: 30px 20px;
                                margin: 30px 0;
                                span {
                                    font-size: 14px;
                                    font-weight: 600;
                                }
                                .icon--_jiantou {
                                    font-size: 25px;
                                }
                                &:hover {
                                    background-color: white;
                                    color: #003150;
                                    border: 1px solid #003150;
                                }
                            }
                        }
                    }
                }
                // 右边的订单详情
                .order-content-right {
                    padding: 60px 0px 30px 10px;
                    // 上面的订单详情
                    .order-content-right-details {
                        h2 {
                            font-size: 20px;
                            color: #003150;
                            text-align: left;
                            margin: 0 0 30px;
                            font-weight: 600;
                        }
                        ul {
                            padding: 0 20px 30px;
                            border-bottom: 1px solid #84888B;
                            li {
                                display: flex;
                                justify-content: space-between;
                                padding: 4px 0;
                                font-size: 15px;
                                span:first-child {
                                    color: #84888B;
                                }
                                span:last-child {
                                    font-weight: 700;
                                }
                            }
                            li:last-child {
                                span {
                                    font-size: 19px;
                                    font-weight: 700;
                                }
                            }
                        }
                    }
                    // 下面的商品列表
                    .order-content-right-goods {
                        padding: 30px 0 0;
                        h3 {
                            text-align: left;
                            font-size: 20px;
                            color: #003150;
                            font-weight: 600;
                            margin: 0 0 20px;
                        }
                        .goodsList {
                            li {
                                display: flex;
                                justify-content: center;
                                background-color: white;
                                margin: 0 0 2px;
                                img {
                                    width: 50%;
                                }
                                .goodsList-li-text {
                                    padding: 0 10px 10px 20px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-between;
                                    div {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: flex-start;
                                    }
                                    .goodsList-li-text1 {
                                        font-size: 14px;
                                        color: #84888B;
                                        font-weight: 400;
                                        span {
                                            margin: 4px 0;
                                        }
                                    }
                                    .goodsList-li-text2 {
                                        margin: 27px 0 0;
                                        font-size: 12px;
                                        color: #84888B;
                                        span {
                                            margin: 3px 0;
                                        }
                                        &:last-child {
                                            font-size: 13px;
                                            color: #003150;
                                        }
                                    }
                                    .goodsList-li-text3 {
                                        margin: 27px 0 0;
                                        color: #003150;
                                        font-weight: 600;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 地址下拉框 
    div {
        .center-left-addressList-content {
            .ant-dropdown-menu {
                .ant-dropdown-menu-item {
                    background-color: #F0F1F3;
                    color: #003150;
                    div {
                        display: flex;
                        justify-content: space-between;
                        padding: 15px 10px;
                        border: 1px solid #003150;
                        border-bottom: none;
                        p {
                            margin: 0px;
                        }
                        span {
                            text-decoration: underline;
                        }
                        &:hover {
                            background-color: #003150;
                            color: white;
                        }
                    }
                    // 选中时的样式
                    .show {
                        background-color: #003150;
                        color: white;
                    }
                    &:last-child {
                        border-bottom: 1px solid #003150;
                    }
                }
            }
        }
    }

    div {
        // 添加配送地址的弹窗
        .ant-modal-root {
            .ant-modal-wrap {
                .Order {
                    width: 850px !important;
                    .ant-modal-content {
                        border-radius: 0px;
                        // 左上角的关闭按钮
                        .ant-modal-close {
                            .ant-modal-close-x {
                                .anticon {
                                    font-size: 25px;
                                    color: #003150;
                                }
                            }
                        }
                        // 右上角的标题
                        .ant-modal-header {
                            border: none;
                            .ant-modal-title {
                                color: #003150;
                                font-weight: 700;
                            }
                        }
                        // 中间的填写信息
                        .ant-modal-body {
                            padding: 0 24px;
                            .ant-col {
                                // 每一个input
                                .ant-form-item {
                                    margin-bottom: 0px;
                                    // 文字标题
                                    .ant-form-item-label {
                                        color: #003150;
                                    }
                                    // input框
                                    .ant-form-item-control-wrapper {
                                        .ant-form-item-control {
                                            .ant-form-item-children {
                                                .ant-input {
                                                    height: 50px;
                                                    font-size: 16px;
                                                    border-radius: 0px;
                                                    border: 1px solid #003150;
                                                    color: #003150;
                                                }
                                                .ant-cascader-picker {
                                                    width: 100%;
                                                }
                                            }
                                            // 下拉选择框
                                            .ant-select-enabled {
                                                color: #003150;
                                                width: 100%;
                                                .ant-select-selection {
                                                    height: 50px;
                                                    border-radius: 0px;
                                                    border:1px solid #003150;
                                                    .ant-select-selection__rendered {
                                                        line-height: 50px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                                // 选择默认地址的多选框
                                .ant-checkbox-wrapper {
                                    color: #003150;
                                    height: 100%;
                                    display: flex;
                                    align-items: flex-end;
                                    .ant-checkbox {
                                        font-size: 25px;
                                        .ant-checkbox-input {
                                            border-radius: 0px;                                        
                                            width: 20px;
                                        }
                                    }
                                }
                            }
                        }
                        // .弹框的底部 
                        .ant-modal-footer {
                            padding: 20px 24px 30px;
                            border: none;
                            text-align: left;
                            .ant-btn {
                                text-align: center;
                                width: 150px;
                                height: 50px;
                                border-radius: 0px;
                                color: white;
                                background: #003150;
                                &:hover{
                                    border: 1px solid #003150;
                                    color: #003150;
                                    background: white;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
</style>